<template>
    <div class="content_box">
        <div class="top_bj">
            <img src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230719/MJqgJmqdXow3kzPF2ZXx.png"
                alt="">
        </div>
        <div class="tx_box" :style="{ paddingTop: navBarHeight + 'px' }">
            <p class="img">
                <img src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230712/E4at7wEr3oQYBJ6ziRDt.jpg" alt="">
            </p>
            <div>
                <p class="text" v-if="!userPhone">杠小二</p>
                <p class="text" v-else>{{ userPhone }}</p>
                <div class="vip">
                    <p class="my_vip" v-if="vipIndex == 0">{{userMsg.userVipName}}</p>
                    <p class="my_vip vip_on1" v-if="vipIndex == 1">{{userMsg.userVipName}}</p>
                    <p class="my_vip vip_on2" v-if="vipIndex == 2||vipIndex == 3">{{userMsg.userVipName}}</p>
                    <p class="my_vip vip_on3" v-if="vipIndex == 4">{{userMsg.userVipName}}</p>
                    <p class="label" @click="toVip">会员权益<van-icon name="arrow" /></p>
                </div>
            </div>
        </div>
        <div class="num_box">
            <div class="box">
                <p class="num">{{ userMsg.available?userMsg.available:'0.00' }}</p>
                <p class="text">余额/充值(元)</p>
            </div>
            <div class="box">
                <p class="num">{{ userMsg.integral?userMsg.integral:0 }}</p>
                <p class="text">积分</p>
            </div>
            <div class="box">
                <p class="num">{{ userMsg.extraTimeCardNum?userMsg.extraTimeCardNum:0 }}</p>
                <p class="text">加时卡</p>
            </div>
        </div>
        <div class="vip_center_box" @click="toVip">
            <img src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230719/yfP4qmkuZe3RgjGzS7DJ.png" alt="">
            <div class="nr_box">
                <div class="lanmu">
                    <p v-for="(item,index) in userMsg.vipLevelList" :key="index">{{item.vipName}}</p>
                </div>
                <div class="line_box">
                    <div class="quan">
                        <p :class="item.isReach?'quan_on':''" v-for="(item,index) in userMsg.vipLevelList" :key="index"></p>
                    </div>
                    <div class="line">
                        <div>
                            <p :style="{width:userMsg.on1?'100%':userMsg.on1Num+'%'}"></p>
                        </div>
                        <div>
                            <p :style="{width:userMsg.on2?'100%':userMsg.on2Num+'%'}"></p>
                        </div>
                        <div>
                            <p :style="{width:userMsg.on3?'100%':userMsg.on3Num+'%'}"></p>
                        </div>
                        <!-- <p v-if="userMsg.baiNum && vipIndex == 0" :style="{width:userMsg.baiNum+15+'%'}"></p>
                        <p v-else-if="userMsg.baiNum && vipIndex == 1" :style="{width:userMsg.baiNum+15+'%'}"></p>
                        <p v-else-if="userMsg.baiNum && vipIndex == 2" :style="{width:userMsg.baiNum+'%'}"></p>
                        <p v-else-if="userMsg.baiNum && vipIndex == 3" :style="{width:userMsg.baiNum+'%'}"></p>
                        <p v-else :style="{width:0+'%'}"></p> -->
                    </div>
                </div>
                <div class="text_box">
                    <p><span>{{userMsg.integral?userMsg.integral:0}}</span>当前累计充值</p>
                    <p v-if="vipIndex != 4">距离{{userMsg.next_vipname}}还差{{userMsg.next_integral}}</p>
                    <p v-else>成就已满</p>
                </div>
            </div>
        </div>

        <div class="banner" @click="toJm">
            <van-image
              width="100%"
              height="230rpx"
              fit="cover"
              widthFix
              lazy-loadmm
              src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20251121/A4H3nC0KvX68RjmF2BA2.png"
            />
        </div>

        <div class="msg_box" style="margin-top:32rpx;">
            <div class="tab">
                <div class="box" @click="toJifen">
                    <img src="/static/images/my_icon3.png" alt="">
                    <p>储值中心</p>
                    <p class="label">特惠</p>
                </div>
                <div class="box" @click="toCoupon">
                    <img src="/static/images/my_icon4.png" alt="">
                    <p>优惠券</p>
                    <p class="label num" v-if="userMsg.couponNum">{{userMsg.couponNum}}</p>
                </div>
                <div class="box" @click="toKajuan">
                    <img src="/static/images/my_icon4.png" alt="">
                    <p>我的卡卷</p>
                    <!-- <p class="label">点单</p> -->
                </div>
                <div class="box" @click="toWriteOff">
                    <img src="/static/images/my_icon5.png" alt="">
                    <p>团购兑换</p>
                </div>
               
                <!-- <div class="box" @click="toShopping">
                    <img src="/static/images/my_icon5.png" alt="">
                    <p>商品购买</p>
                    <p class="label">点单</p>
                </div> -->
            </div>

            <div class="list">
                <p class="title"><span></span>精选服务</p>
                <div>
                    <div class="box" @click="toNovice">
                        <p class="icon"><img class="img1" src="/static/images/my_icon6.png" alt=""></p>
                        <p class="text">新手指南</p>
                    </div>
                    <div class="box" @click="wifiShow = true">
                        <p class="icon"><img class="img2" src="/static/images/my_icon7.png" alt=""></p>
                        <p class="text">wifi链接</p>
                    </div>
                    <div class="box" @click="toFeedBack">
                        <p class="icon"><img class="img3" src="/static/images/my_icon8.png" alt=""></p>
                        <p class="text">意见反馈</p>
                    </div>
                    <div class="box" @click="kefuShow = true">
                        <p class="icon"><img class="img4" src="/static/images/my_icon9.png" alt=""></p>
                        <p class="text">联系客服</p>
                    </div>
                    <div class="box" @click="toSet">
                        <p class="icon"><img class="img5" src="/static/images/my_icon10.png" alt=""></p>
                        <p class="text">设置</p>
                  </div>
                </div>
            </div>
        </div>

        <!-- 联系客服 -->
        <!-- <div class="kefu_pop">
<van-popup position="bottom" :show="kefuShow" @close="closeKefu">
<div class="box">
<p class="title">联系客服</p>
<div class="nr">
<button type="primary" open-type="contact">
<p class="img">
<img src="/static/images/kefu.png" alt="">
</p>
<p class="text">在线客服</p>
</button>
<button @click="callPhone">
<p class="img">
<img src="/static/images/tell.png" alt="">
</p>
<p class="text">电话客服</p>
</button>
</div>
<p class="quxiao" @click="closeKefu">取消</p>
</div>
</van-popup>
</div> -->

        <!-- wifi -->
        <div class="wifi_pop">
            <van-popup :show="wifiShow">
                <div class="box">
                    <img class="bj" src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230713/029yL92UWobMvvyWuK5i.png"
                        alt="">
                    <div class="nr">
                        <div class="zhanghao">
                            <p class="text1">WIFI 账号：{{ storeImg.wifiName }}</p>
                            <p class="text1">WIFI 密码：{{ storeImg.wifiPassword }}</p>
                        </div>
                        <p class="anniu" @click="connectWifi">一键链接</p>
                    </div>
                </div>
                <p class="close" @click="wifiShow = false">
                    <img src="/static/images/close1.png" alt="">
                </p>
            </van-popup>
        </div>

        <!-- 联系客服 -->
        <div class="wifi_pop">
            <van-popup :show="kefuShow">
                <div class="box">
                    <img class="bj" src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230713/RpoflPSDlfvw6BsjHE0z.png"
                        alt="">
                    <div class="nr1">
                        <button type="primary" open-type="contact">
                            <div class="img">
                                <p class="img1">
                                    <img src="/static/images/pop_kf.png" alt="">
                                </p>
                                <p class="text">在线客服</p>
                            </div>
                        </button>
                        <button @click="callPhone">
                            <div class="img">
                                <p class="img2">
                                    <img src="/static/images/pop_tell.png" alt="">
                                </p>
                                <p class="text">电话客服</p>
                            </div>
                        </button>
                    </div>
                    <p class="anniu1" @click="kefuShow = false">取消</p>
                </div>
            </van-popup>
        </div>
    </div>
</template>

<script>
import {
    getUserPhone,
    getRoles,
    getLatitude,
    getLongitude
} from "@/utils/auth";
import {
    getStoreDetails,
    getMyWalletAmount,
    getPersonal,
} from "@/api/index";
import { mapState,mapActions } from 'vuex'
export default {
    data() {
        return {
            statusBarHeight: "", // 状态栏高度
            titleBarHeight: "", // 标题栏高度
            navBarHeight: "", // 导航栏总高度
            kefuShow: false,
            wifiShow: false,
            available: '0.00',
            userPhone: '',
            storeImg: {},

            userMsg:{},
            vipIndex:0,
        };
    },
    computed: {
        ...mapState({
            storeId: state => state.user.storeId,
        })
    },
    methods: {

        // 获取用户信息
        getUserInfo(){
            getPersonal().then(res=>{
                if (res.statusCode == '00000') {
                    // 用于测试
                    // res.data.userVipName = '注册会员'
                    // res.data.integral = 900

                    // 3段各自的百分比
                    res.data.on1Num = 0
                    res.data.on2Num = 0
                    res.data.on3Num = 0

                    // 黄金/铂金/钻石 会员的阈值
                    let height_integral1 = res.data.vipLevelList[1].needIntegral
                    let height_integral2 = res.data.vipLevelList[2].needIntegral
                    let height_integral3 = res.data.vipLevelList[3].needIntegral
                    
                    // 取对应达到的会员等级
                    const nameIndex = res.data.vipLevelList.findIndex(item=>item.vipName === res.data.userVipName)

                    // 钻石会员，最高成就
                    if(res.data.integral>=res.data.vipLevelList[res.data.vipLevelList.length-1].needIntegral){
                        res.data.on1 = true
                        res.data.on2 = true
                        res.data.on3 = true
                        this.vipIndex = 4
                        this.userMsg = res.data
                        res.data.vipLevelList.map((item,index)=>{
                            item.isReach = true
                        })
                        return
                    }

                    // 注册会员        
                    if(nameIndex == 0){
                        res.data.on1 = false
                        res.data.on2 = false
                        res.data.on3 = false
                        res.data.on1Num = res.data.integral / height_integral1 * 100
                    }

                    // 黄金会员 
                    if(nameIndex == 1){
                        res.data.on1 = true
                        res.data.on2 = false
                        res.data.on3 = false
                        // 前后会员的区间范围
                        let fw_num = height_integral2 - height_integral1
                        // 计算当前值在区间内的位置
                        let new_num = res.data.integral - height_integral1
                        // 计算百分比
                        res.data.on2Num = (new_num / fw_num) * 100
                    }

                    // 铂金会员
                    if(nameIndex == 2){
                        res.data.on1 = true
                        res.data.on2 = true
                        res.data.on3 = false
                        // 前后会员的区间范围
                        let fw_num = height_integral3 - height_integral2
                        // 计算当前值在区间内的位置
                        let new_num = res.data.integral - height_integral2
                        // 计算百分比
                        res.data.on3Num = (new_num / fw_num) * 100
                    }
                
                        
                    // 判断圆点和取距离下段会员的值
                    res.data.vipLevelList.map((item,index)=>{
                        item.isReach = true
                        if(item.needIntegral > res.data.integral){
                            item.isReach = false
                        }
                        if(item.vipName == res.data.userVipName){
                            res.data.next_integral = res.data.vipLevelList[index+1].needIntegral - res.data.integral
                            res.data.next_vipname = res.data.vipLevelList[index+1].vipName
                            this.vipIndex = index
                        }
                    })
                    this.userMsg = res.data
                }
            })
        },

        // 跳转设置
        toSet() {
            if (!getUserPhone()) {
                wx.navigateTo({
                    url: '/pages/authorization/main',
                });
                return
            }
            wx.navigateTo({
                url: '/pages/myPages/set/main',
            });
        },
        toKajuan(){
            const that = this
            if (!getUserPhone()) {
                wx.navigateTo({
                    url: '/pages/authorization/main',
                });
                return
            }
            if (wx.requestSubscribeMessage) {
                wx.requestSubscribeMessage({
                    tmplIds: ['LtzfaLObZ901OFH4RAus1VOoNu7bKP0_h0oCKWGFbO8','5uggA9vmvCAhyBoHA54gocixx1-FsjuJMhpNELSYzY4'],
                    success: (res) => {
                        console.log(res);
                        if(res["LtzfaLObZ901OFH4RAus1VOoNu7bKP0_h0oCKWGFbO8"] == 'accept' && res["5uggA9vmvCAhyBoHA54gocixx1-FsjuJMhpNELSYzY4"] == 'accept'){
                            wx.navigateTo({
                                url: '/pages/daka/list/main',
                            });
                        }else{
                            // that.guideOpenSubscribeMessage();
                            wx.showModal({         
                                title: '提示',
                                content: '检测到您没有开启优惠订阅，去开启？',
                                confirmText: '去开启',
                                 cancelText:'下次再去',
                                success: function (sm) {
                                    if (sm.confirm) {// 用户点击了确定 可以调用删除方法了            
                                        wx.openSetting();
                                    } else if (sm.cancel) { 
                                        wx.navigateTo({
                                            url: '/pages/daka/list/main',
                                        });
                                    }
                                }
                            })
                        }
                    },
                    fail: (res) => {
                        //console.log(res)
                        if (res.errCode == 20004) {
                            // that.guideOpenSubscribeMessage();
                            wx.showModal({         
                                title: '提示',
                                content: '检测到您没有开启优惠订阅，去开启？',
                                confirmText: '去开启',
                                 cancelText:'下次再去',
                                success: function (sm) {
                                    if (sm.confirm) {// 用户点击了确定 可以调用删除方法了            
                                        wx.openSetting();
                                    } else if (sm.cancel) { 
                                        wx.navigateTo({
                                            url: '/pages/daka/list/main',
                                        });
                                    }
                                }
                            })
                        }
                        //console.log("取消")
                    },
                    complete: (errMsg) => {
                        //console.log("订阅消息 完成 " + errMsg); 
                    }
                })
            }
        },
        // 跳转商品购买
        toShopping() {
            if (!getUserPhone()) {
                wx.navigateTo({
                    url: '/pages/authorization/main',
                });
                return
            }
            wx.navigateTo({
                url: `/pages/my/shopping/main`,
            });
        },

        // 一键链接wifi
        connectWifi() {
            var that = this;
            //检测手机型号
            wx.getSystemInfo({
                success: (res) => {
                    var system = '';
                    if (res.platform == 'android') system = parseInt(res.system.substr(8));
                    if (res.platform == 'ios') system = parseInt(res.system.substr(4));
                    if (res.platform == 'android' && system < 6) {
                        this.$toast('手机版本不支持~')
                        return;
                    }
                    if (res.platform == 'ios' && system < 11.2) {
                        this.$toast('手机版本不支持~')
                        return;
                    }
                    //2.初始化 Wi-Fi 模块
                    //console.log("支持")
                    that.startWifi();
                }
            });
        },

        //初始化 Wi-Fi 模块
        startWifi() {
            let that = this
            wx.startWifi({
                success: () => {
                    //请求成功连接Wifi
                    //console.log('成功')
                    wx.showLoading({ title: '连接中...' })
                    wx.connectWifi({
                        SSID: this.storeImg.wifiName,
                        password: this.storeImg.wifiPassword,
                        success: (res) => {
                            //console.log(res)
                            wx.hideLoading()
                            setTimeout(() => {
                                that.$toast('连接成功~')
                            }, 500);
                        },
                        fail: (err) => {
                            //console.log(err)
                            setTimeout(() => {
                                that.$toast('连接失败~')
                            }, 500);
                            wx.hideLoading()
                        }
                    });
                },
                fail: (res) => {
                    that.$toast('连接失败~')
                }
            });
        },

        // 客服电话
        callPhone() {
            wx.makePhoneCall({
                phoneNumber: this.storeImg.mobile //仅为示例，并非真实的电话号码
            })
        },

        // 跳转个人中心
        toVip(){
            const that = this;
            if (!getUserPhone()) {
                wx.navigateTo({
                    url: '/pages/authorization/main',
                });
                return
            }
             if (wx.requestSubscribeMessage) {
                wx.requestSubscribeMessage({
                    tmplIds: ['Qw9CCG_sM1g60VDvTPE_F0361CfQEFlTF4Dj6PAptZY'],
                    success: (res) => {
                        console.log(res);
                        if(res["Qw9CCG_sM1g60VDvTPE_F0361CfQEFlTF4Dj6PAptZY"] == 'accept'){
                            wx.navigateTo({
                                url: `/pages/vipCenter/main`,
                            });
                        }else{
                            // that.guideOpenSubscribeMessage();
                            wx.showModal({         
                                title: '提示',
                                content: '检测到您没有开启优惠订阅，去开启？',
                                confirmText: '去开启',
                                 cancelText:'下次再去',
                                success: function (sm) {
                                    if (sm.confirm) {// 用户点击了确定 可以调用删除方法了            
                                        wx.openSetting();
                                    } else if (sm.cancel) { 
                                        wx.navigateTo({
                                            url: `/pages/vipCenter/main`,
                                        });
                                    }
                                }
                            })
                        }
                    },
                    fail: (res) => {
                        //console.log(res)
                        if (res.errCode == 20004) {
                            // that.guideOpenSubscribeMessage();
                            wx.showModal({         
                                title: '提示',
                                content: '检测到您没有开启优惠订阅，去开启？',
                                confirmText: '去开启',
                                 cancelText:'下次再去',
                                success: function (sm) {
                                    if (sm.confirm) {// 用户点击了确定 可以调用删除方法了            
                                        wx.openSetting();
                                    } else if (sm.cancel) { 
                                        wx.navigateTo({
                                            url: `/pages/vipCenter/main`,
                                        });
                                    }
                                }
                            })
                        }
                        //console.log("取消")
                    },
                    complete: (errMsg) => {
                        //console.log("订阅消息 完成 " + errMsg); 
                    }
                })
            }
        },

        // 调整加盟
        toJm(){
            if (!getUserPhone()) {
                wx.navigateTo({
                    url: '/pages/authorization/main',
                });
                return
            }
            // wx.navigateTo({
            //     url: `/pages/jiameng/main`,
            // });
            wx.navigateTo({
                url: `/pages/draw/main`,
            });
        },

        // 跳转新手指南
        toNovice() {
            wx.navigateTo({
                url: `/pages/novice_guide/main`,
            });
        },

        // 获取店铺信息
        getStoreMsg() {
            getStoreDetails({ storeId: '' }).then(res => {
                if (res.statusCode == '00000') {
                    this.storeImg = res.data
                }
            })
        },

        // 获取钱包金额
        getMoney() {
            getMyWalletAmount().then(res => {
                if (res.statusCode == '00000') {
                    this.available = res.data.available
                }
            })
        },

        // 关闭弹窗 
        closeKefu() {
            this.kefuShow = false
            setTimeout(() => {
                wx.showTabBar()
            }, 300);
        },
        // 跳转意见反馈
        toFeedBack() {
            if (!getUserPhone()) {
                wx.navigateTo({
                    url: '/pages/authorization/main',
                });
                return
            }
            wx.navigateTo({
                url: `/pages/feedback/main`,
            });
        },

        // 跳转优惠券
        toCoupon() {
            const that = this;
            if (!getUserPhone()) {
                wx.navigateTo({
                    url: '/pages/authorization/main',
                });
                return
            }
            if (wx.requestSubscribeMessage) {
                wx.requestSubscribeMessage({
                    tmplIds: ['UnjYs0KyBU-pctGsR6R9-H4clSLzrwnGc1G0_Dpkyzs','cAPQY8oT5b_NN5jpIjIlHjWqiOuXSyBAV4Pmq6VZ4Gw'],
                    success: (res) => {
                        console.log(res);
                        if(res["UnjYs0KyBU-pctGsR6R9-H4clSLzrwnGc1G0_Dpkyzs"] == 'accept' && res["cAPQY8oT5b_NN5jpIjIlHjWqiOuXSyBAV4Pmq6VZ4Gw"] == 'accept'){
                            wx.navigateTo({
                                url: `/pages/coupon/main`,
                            });
                        }else{
                            // that.guideOpenSubscribeMessage();
                            wx.showModal({         
                                title: '提示',
                                content: '检测到您没有开启优惠订阅，去开启？',
                                confirmText: '去开启',
                                 cancelText:'下次再去',
                                success: function (sm) {
                                    if (sm.confirm) {// 用户点击了确定 可以调用删除方法了            
                                        wx.openSetting();
                                    } else if (sm.cancel) { 
                                        wx.navigateTo({
                                            url: `/pages/coupon/main`,
                                        });
                                    }
                                }
                            })
                        }
                    },
                    fail: (res) => {
                        //console.log(res)
                        if (res.errCode == 20004) {
                            // that.guideOpenSubscribeMessage();
                            wx.showModal({         
                                title: '提示',
                                content: '检测到您没有开启优惠订阅，去开启？',
                                confirmText: '去开启',
                                 cancelText:'下次再去',
                                success: function (sm) {
                                    if (sm.confirm) {// 用户点击了确定 可以调用删除方法了            
                                        wx.openSetting();
                                    } else if (sm.cancel) { 
                                        wx.navigateTo({
                                            url: `/pages/coupon/main`,
                                        });
                                    }
                                }
                            })
                        }
                        //console.log("取消")
                    },
                    complete: (errMsg) => {
                        //console.log("订阅消息 完成 " + errMsg); 
                    }
                })
            }
        },

        // guideOpenSubscribeMessage() {    
        //     var that = this;
        //     wx.showModal({         
        //         title: '提示',
        //         content: '检测到您没有开启订阅消息的权限，是否去设置？',
        //         success: function (sm) {
        //             if (sm.confirm) {// 用户点击了确定 可以调用删除方法了            
        //                 wx.openSetting();
        //             } else if (sm.cancel) { 
        //                 wx.showToast({
        //                     title: '您没有同意授权订阅消息，订阅失败',
        //                     icon: 'none'
        //                 }); 
        //             }
        //         }
        //     })    
        // },
            

        // 跳转团购-充值
        toJifen() {
            if (!getUserPhone()) {
                wx.navigateTo({
                    url: '/pages/authorization/main',
                });
                return
            }
            wx.navigateTo({
                url: `/pages/recharge/main`,
            });
        },

        // 跳转团购
        toWriteOff() {
            if (!getUserPhone()) {
                wx.navigateTo({
                    url: '/pages/authorization/main',
                });
                return
            }
            wx.navigateTo({
                url: `/pages/writeOff/main`,
            });
        },
    },
    onShow() {
        this.getUserInfo()
        if (getUserPhone()) {
            this.userPhone = getUserPhone().substr(0, 3) + '****' + getUserPhone().substr(7)
        }

        if (getRoles().length) {
            this.roles = getRoles()
        }
    },
    onLoad() {
        this.getStoreMsg()
    },
    onTabItemTap() {
        wx.vibrateShort({ type: 'heavy' });
    },
    beforeMount() {
        const self = this;
        wx.getSystemInfo({
            success(system) {
                //console.log(`system:`, system);
                self.statusBarHeight = system.statusBarHeight;
                let platformReg = /ios/i;
                if (platformReg.test(system.platform)) {
                    self.titleBarHeight = 44;
                } else {
                    self.titleBarHeight = 48;
                }
                self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
            },
        });
    },
};
</script>

<style lang="scss" scoped>
.content_box {
    min-height: 100vh;
    background: #F5F5F5;
    padding-bottom:50rpx;
    .top_bj {
        position: absolute;
        top: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;

        img {
            width: 100%;
            height: 500rpx;
        }

        .img2 {
            flex: 1;
            position: relative;
            z-index: -1;
        }
    }

    .top_lanmu {
        position: relative;
        z-index: 100;
        display: flex;
        justify-content: space-around;
        margin-top: 50rpx;
    }

    .vip_box {
        position: relative;
        z-index: 100;
        margin: 0 32rpx;
        background: #aaa;
        margin-top: 50rpx;
        padding: 32rpx;
        border-radius: 16rpx;

        .line_box {
            display: flex;
            justify-content: space-between;
        }

        .quan {
            position: relative;
            margin: 20rpx 0;

            .line {
                width: 100%;
                height: 4rpx;
                background: #fff;
                position: absolute;
            }

            .n {
                display: flex;
                justify-content: space-between;
                position: relative;
                z-index: 100;

                p {
                    width: 10rpx;
                    height: 10rpx;
                    background: red;
                    border-radius: 50%;
                }
            }
        }

        .text_box {
            display: flex;
            justify-content: space-between;
            font-size: 30rpx;
        }
    }

    .banner {
        margin: 32rpx;
        background: #aaa;
        height: 150rpx;
        border-radius: 16rpx;
    }




    .tx_box {
        position: relative;
        z-index: 10;
        margin-left: 32rpx;
        display: flex;
        align-items: center;
        font-size: 30rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #030303;
        .img {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            margin-right: 24rpx;
            background: #fff;
            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
        .vip{
            margin-top:8rpx; 
            display: flex;
            align-items: center;
            .my_vip{
                width: 128rpx;
                height: 36rpx;
                line-height: 36rpx;
                background: linear-gradient(90deg, #98EB98 0%, #E5FFE5 100%);
                border-radius: 34rpx;
                font-size: 24rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #111111;
                text-align: center;
                margin-right:16rpx;
                &.vip_on1{
                    background: linear-gradient(90deg, #DDBC7C 0%, #E5FFE5 100%);
                }
                &.vip_on2{
                    background: linear-gradient(90deg, #B4B8DB 0%, #E5FFE5 100%);
                }
                &.vip_on3{
                    background: linear-gradient(90deg, #6781C1 0%, #E5FFE5 100%);
                }
            }  
            .label{
                width: 144rpx;
                height: 36rpx;
                line-height: 36rpx;
                background: #00C200;
                border-radius: 34rpx;
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                text-align: center;
            }
        }
    }
    .num_box{
        position: relative;
        z-index: 100;
        display: flex;
        justify-content: space-around;
        margin-top:48rpx;
        .box{
            text-align: center;
            .num{
                font-size: 40rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #111111;
                margin-bottom:6rpx;
            }
            .text{
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                color: #111111;
            }
        }
    }
    .vip_center_box{
        width: 100%;
        height: 228rpx;
        position: relative;
        z-index: 100;
        margin-top:30rpx;
        img{
            width: 100%;
            height: 228rpx;
            position: absolute;
            top:0;
            left: 0;
        }
        .nr_box{
            margin:0 32rpx;
            position: relative;
            z-index: 50;
            padding:0 32rpx;
            .lanmu{
                display: flex;
                justify-content: space-between;
                padding-top:48rpx;
                font-size: 24rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #111111;
                p:nth-child(2){
                    position: relative;
                    right:10rpx;
                }
                p:nth-child(3){
                    position: relative;
                    right:-16rpx;
                }
            }
            .line_box{
                position: relative;
                margin-top:12rpx;
                overflow: hidden;
                .quan{
                    display: flex;
                    justify-content: space-between;
                    p{
                        width: 16rpx;
                        height: 16rpx;
                        background: #fff;
                        border-radius: 50%;
                        // &:nth-child(2){
                        //     position: relative;
                        //     right:-10rpx;
                        // }
                        // &:nth-child(3){
                        //     position: relative;
                        //     right:20rpx;
                        // }
                        &.quan_on{
                            background: #5a9856;
                        }
                    }
                }
                .line{
                    width: 100%;
                    height: 8rpx;
                    border-radius: 50rpx;
                    background: #fff;
                    position: absolute;
                    top:4rpx;
                    z-index: -1;
                    display: flex;
                    div{
                        width: 33%;
                        height: 8rpx;
                        p{
                            height: 8rpx;
                            background: #88C683;
                        }
                        
                    }
                }
            }
            .text_box{
                display: flex;
                justify-content: space-between;
                margin-top:34rpx;
                font-size: 24rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #111111;
                p{
                    display: flex;
                    align-items: center;
                    span{
                        font-size:40rpx;
                        margin-right:4rpx;
                    }
                }
            }
        }
    }
    .banner{
        height: 230rpx;
        margin:30rpx 0 24rpx 0;
    }

    .msg_box {
        position: relative;
        z-index: 20;
        .tab {
            background: #fff;
            display: flex;
            height: 200rpx;
            align-items: center;
            justify-content: space-around;
            text-align: center;
            font-size: 24rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #111111;

            img {
                width: 72rpx;
                height: 72rpx;
                margin-bottom: 12rpx;
            }

            .box {
                position: relative;
            }

            .label {
                width: 52rpx;
                height: 34rpx;
                background: #FF514D;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 18rpx;
                border-bottom-right-radius: 15rpx;
                border-top-left-radius: 15rpx;
                position: absolute;
                top: 0;
                right: -20rpx;
                &.num{
                    width: 30rpx;
                    height: 30rpx;
                    border-radius: 50%;
                    top: 0;
                    right: -10rpx;
                }
            }
        }
    }

    .list {
        margin-top: 24rpx;
        background: #fff;
        padding: 32rpx;
        z-index: 20;

        .title {
            margin-bottom: 30rpx;
            display: flex;
            align-items: center;
            font-size: 30rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #111111;
            span{
                display: inline-block;
                width: 3px;
                height: 15px;
                background: #00C200;
                border-radius: 2px;
                margin-right:16rpx;
            }
        }

        .box {
            display: inline-block;
            text-align: center;
            width: 25%;
            &:last-child{
                margin-top:34rpx;
            }
            .icon{
                width: 80rpx;
                height: 80rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                margin:0 auto;
                .img1{
                    width: 44rpx;
                    height: 52rpx;
                }
                .img2{
                    width: 50rpx;
                    height: 46rpx;
                }
                .img3{
                    width: 44rpx;
                    height: 52rpx;
                }
                .img4{
                    width: 51rpx;
                    height: 46rpx;
                }
                .img5{
                    width: 50rpx;
                    height: 46rpx;
                }
            }

            .text {
                font-size: 24rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #111111;
                margin-top: 8rpx;
            }
        }
    }

    .kefu_pop {
        /deep/ .van-popup {
            border-top-right-radius: 20rpx !important;
            border-top-left-radius: 20rpx !important;
        }

        .title {
            height: 120rpx;
            line-height: 120rpx;
            font-size: 34rpx;
            color: #505050;
            font-weight: 600;
            text-align: center;
        }

        .nr {
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding-bottom: 48rpx;
        }

        button::after {
            border: none;
        }

        button {
            background: none;
            color: #222;
            margin: 0;

            .img {
                width: 100rpx;
                height: 100rpx;
                background: #F9F9FB;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                    width: 52rpx;
                    height: 52rpx;
                }
            }

            .text {
                color: #6C6C6C;
                font-size: 24rpx;
                text-align: center;
            }
        }

        .quxiao {
            margin: 0 30rpx;
            height: 96rpx;
            line-height: 96rpx;
            background: #222;
            border-radius: 4rpx;
            margin-bottom: 24rpx;
            text-align: center;
            font-size: 30rpx;
            color: #fff;
        }
    }

    .wifi_pop {
        /deep/ .van-popup {
            background: none;
            width: 530rpx;
        }

        .box {
            width: 530rpx;
            height: 616rpx;
            position: relative;

            .bj {
                width: 530rpx;
                height: 616rpx;
                top: 0;
                left: 0;
                position: absolute;
            }

            .nr {
                position: relative;
                z-index: 10;
                width: 80%;
                margin: 0 auto;
                top: 280rpx;

                .zhanghao {
                    background: #F4FFF4;
                    font-size: 28rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #111111;
                    padding: 32rpx;
                    border-radius: 16rpx;

                    p {
                        &:nth-of-type(1) {
                            margin-bottom: 24rpx;
                        }
                    }
                }
            }

            .anniu {
                height: 80rpx;
                line-height: 80rpx;
                background: #00C200;
                border-radius: 40rpx;
                margin-top: 48rpx;
                font-size: 32rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                text-align: center;
            }

            .anniu1 {
                width: 434rpx;
                height: 80rpx;
                line-height: 80rpx;
                background: #00C200;
                border-radius: 40rpx;
                margin: 0 auto;
                margin-top: 40rpx;
                font-size: 32rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                text-align: center;
                position: relative;
                top: 250rpx;
            }

            .nr1 {
                display: flex;
                align-items: center;
                justify-content: space-around;
                padding-bottom: 48rpx;
                position: relative;
                top: 280rpx;
            }

            button::after {
                border: none;
            }

            button {
                background: none;
                color: #222;
                margin: 0;

                .img {
                    width: 160rpx;
                    height: 160rpx;
                    background: #F8F8F8;
                    border-radius: 16rpx;
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    justify-content: center;

                    .img1 {
                        width: 70rpx;
                        height: 70rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        img {
                            width: 56rpx;
                            height: 48rpx;
                        }
                    }

                    .img2 {
                        width: 70rpx;
                        height: 70rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        img {
                            width: 42rpx;
                            height: 56rpx;
                        }
                    }
                }

                .text {
                    font-size: 26rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    color: #111111;
                    text-align: center;
                }
            }
        }

        .close {
            width: 64rpx;
            height: 64rpx;
            margin: 32rpx auto 0 auto;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>